import React from 'react'
import ReactDOM from 'react-dom'

function ListItem(props) {
  return (
    <li>{ props.value }</li>
  )
}

function NumberItem(props) {
  const numbers = props.numbers;
  const listItems = numbers.map(number => {
    return <ListItem key={ number.toString() } value={ number }/>
  })
  return (
    <ul>{ listItems }</ul>
  )
}

const numbers = [1, 2, 3, 4, 5, 6]

ReactDOM.render(
  <NumberItem numbers={ numbers }/>,
  document.getElementById('root')
)